﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css立方体( 原创)</title>
<script src="../js/jquery.min.js"></script>
<style>
#preserve {
	width:200px;
	height:200px;
	transform-style:preserve-3d;
	position:fixed;
	top:200px;
	left:200px;
	/* transform:rotatey(45deg) rotatex(45deg);
	*/
            animation:rotate 5s  infinite alternate;
}
#preserve>div {
	width:200px;
	height:200px;
	position:absolute;
	left:0;
	top:0;
	font-size:80px;
	line-height:200px;
	text-align:center;
	/* opacity:0.5;
	*/
}
.one {
	background-color:red;
	transform:translateZ(100px);
}
.two {
	background-color:yellow;
	transform:translateZ(-100px);
}
.three {
	background-color:green;
	transform:rotateX(90deg) translateZ(100px);
}
.four {
	background-color:#000;
	transform:rotateX(90deg) translateZ(-100px);
}
.five {
	background-color:blue;
	transform:rotateY(90deg) translateZ(100px);
}
.six {
	background-color:blue;
	transform:rotateY(90deg) translateZ(-100px);
}
.qq {
	background-color:blue;
	transform:rotateY(90deg);
}
.bb {
	background-color:blue;
	transform:rotateX(90deg);
}
@keyframes rotate {
	0% {
	transform:rotateY(0deg) rotateX(0deg);
}
/* 25% {
	transform:rotateY(45deg) rotateX(45deg);
}
50% {
	transform:rotateY(90deg) rotateX(90deg);
}
75% {
	transform:rotateY(135deg) rotateX(135deg);
}
*/
            100% {
	transform:rotateY(360deg) rotateX(360deg);
}
}</style>
</head>
<body>
<div id="preserve">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div class="four">4</div>
    <div class="five">5</div>
    <div class="six">6</div>
    <div class="qq"></div>
    <div class="bb"></div>
</div>

<script>

</script>

</body>
</html>
